<template>

    <div>
        <template v-if="action == 'edit'">
            <el-date-picker
                    :value="value"
                    v-on="$listeners"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间">
            </el-date-picker>
        </template>
        <template v-if="action == 'table'">
             <!--<i class="el-icon-time"></i>-->
            <div v-if="value">
                <i class="el-icon-date"></i><span>{{value.substring(2, 10)}}</span>
            </div>
            <div v-if="value">
                <i class="el-icon-time"></i><span>{{value.substring(11)}}</span>
            </div>

        </template>
        <template v-if="action == 'search'">
            <el-date-picker
                    style="width:100%"
                    :value="value"
                    v-on="$listeners"
                    :picker-options="pickerOptions"
                    align="right"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :start-placeholder="fieldName + '开始'"
                    :end-placeholder="fieldName + '结束'"
                    >
            </el-date-picker>
        </template>

    </div>

</template>
<script>
    import base from './base.js';

    export default {
        extends: base,
        props: {},
        data() {
            return {
                searchModel: 'range',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近三天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近10天内',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 10);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近15天内',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        filters: {
            datereg(val) {
                if (val) {
                    return val.slice(5,16);
                }
            },
            pickTime(val) {
                if (val) {
                    let date = new Date(val * 1000);
                    let h = date.getHours();
                    let r = ':';
                    let m = date.getMinutes();
                    if (h < 10) {
                        h = "0" + h;
                    }
                    if (m < 10) {
                        m = "0" + m;
                    }
                    return h + r + m;
                }
            }
        }
    }
</script>
<style>
</style>



